<template>
  <view>
    <view class="down-load-box" :style="{ width: showAll ? '274rpx' : '114rpx', opacity: scrollIng ? 0.4 : 1 }"  v-if="mpAudit == 1">
      <view style="width: 60rpx;height: 80rpx;" @click="clickChange"></view>
      <view style="flex: 1;" @click="showLoadPopup"></view>
    </view>
    <uni-popup ref="popupDownload" type="center" background-color="none">
      <view class="bg-box-p-d">
        <img src="https://img.qumoyugo.com/webimgbg/pet-download-btn-cp-link.png" style="height: 66rpx;width: 274rpx;"  @click="chandleCopy">
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import { ref, getCurrentInstance, onMounted } from 'vue'
import { onPageScroll } from '@dcloudio/uni-app'
const showAll = ref(true)
const popupDownload = ref(null)
const scrollTop = ref(0) // 页面滚动的高度
const scrollIng = ref(false) // 页面是否在滚动
const mpAudit = ref(-1)
const { $https } = getCurrentInstance().appContext.config.globalProperties
onMounted(() => {
  $https({
    url: '/common/config?key=mpAudit',
    type: ''
  }).then(res => {
    if (res.code === 0) {
      mpAudit.value = res.data.mpAudit
    }
  })
})
onPageScroll((e) => {
  scrollTop.value = e.scrollTop
  scrollIng.value = true
  const timer = setTimeout(() => {
    if (scrollTop.value === e.scrollTop) {
      scrollTop.value = e.scrollTop
      scrollIng.value = false
      clearTimeout(timer)
    }
  }, 300)
})
const clickChange = () => {
  showAll.value = !showAll.value
}
const showLoadPopup = () => {
  popupDownload.value.open()
}
const chandleCopy = () => {
  wx.setClipboardData({
    data: 'https://mp.qumoyugo.com/share/download',
    success (res) {
      uni.showToast({
        title: '复制成功',
        icon: 'none'
      })
      setTimeout(() => {
        popupDownload.value.close()
      }, 500)
    }
  })
}
</script>

<style scoped lang="scss">
.down-load-box{
  position: fixed;
  right: 0;
  bottom:200rpx;
  background: url('https://img.qumoyugo.com/webimgbg/pet-download-btn-pic.png') no-repeat;
  width: 274rpx;
  height: 80rpx;
  background-size: cover;
  z-index: 98;
  transition: all 0.3s;
  display: flex;
}
.bg-box-p-d{
  width: 630rpx;
  height: 756rpx;
  background: url('https://img.qumoyugo.com/webimgbg/pet-download-cu-bg.png') no-repeat;
  background-size: 100%;
  text-align: center;
  padding-top: 584rpx;
}
</style>
